<template>
    <div class="bi-toolbar">
        <template v-if="ready">
            <div class="bi-toolbar__left">
                <div 
                    class="bi-toolbar__item"
                    v-for="(item, index) in leftItems"
                    :key="index"
                >
                    <component :is="handleRenderItem(item)"></component>
                </div>
            </div>
            <div class="bi-toolbar__right">
                <div 
                    class="bi-toolbar__item"
                    v-for="(item, index) in rightItems"
                    :key="index"
                >
                    <component :is="handleRenderItem(item)"></component>
                </div>
            </div>
        </template>
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'BiToolbar',
    provide () {
        return {
            BiToolbar: this
        }
    },
    data () {
        return {
            ready: false,
            items: []
        }
    },
    computed: {
        leftItems () {
            return this.items.filter(v => v.props.position === 'left')
        },
        rightItems () {
            return this.items.filter(v => v.props.position === 'right')
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.ready = true
        })
    },
    methods: {
        handleRenderItem (item) {
            return {
                render: () => {
                    return item.render()
                }
            }
        },
        addItem (item) {
            if (!item || !item.id) {
                return
            }
            if (this.items.some(v => v.id === item.id)) {
                return
            }
            this.items.push(item)
        },
        removeItem (id) {
            this.items = this.items.filter(v => v.id !== id)
        }
    }
}
</script>
<style lang="scss">
.bi-toolbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
</style>